<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <!-- <el-table-column
        align="center"
        label="编号"
        prop="orderId"
        min-width="80"
        show-overflow-tooltip
      /> -->
      <el-table-column
        align="center"
        label="项目"
        prop="projectName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="锁场日期"
        show-overflow-tooltip
        min-width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.startDate }}  {{ scope.row.startDate && scope.row.endDate?'-' + scope.row.endDate: '' }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="锁定场地明细"
        prop="lockInfo"
        min-width="200"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="操作人"
        prop="creatorName"
        show-overflow-tooltip
        min-width="120"
      />
      <el-table-column
        align="center"
        label="备注"
        min-width="140"
        prop="remark"
        show-overflow-tooltip
      />
      <el-table-column
        label="创建时间"
        prop="createTime"
        min-width="160"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column label="操作" min-width="140" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button v-if="meta.indexOf('UpdateSiteLock') > -1 && scope.row.type == 1 && scope.row.status == 1" v-preventReClick type="text" @click="showGdydBtn(scope.row)">修改</el-button>
            <el-button v-if="meta.indexOf('RemoveBatchSiteLock') > -1 && scope.row.type == 1 && scope.row.status == 0" v-preventReClick type="text" class="secondColor" @click="removeBtn(scope.row)">删除</el-button>
            <el-button v-if="meta.indexOf('RemoveBatchSiteLock') > -1 && scope.row.type == 1 && scope.row.status == 1" v-preventReClick type="text" class="secondColor" @click="removeBtn(scope.row)">关闭</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="pageSizeChange"
    />
    <areaSellOrderDetail ref="areaSellOrderDetail" />
    <plsc ref="plsc" @plscSuccess="getList(1)" />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import store from '@/store'
import { siteLockDetail, batchSiteLockRecord, getProjectList, siteLockDel } from '@/api'
import QueryForm from '@/components/QueryForm'
import areaSellOrderDetail from '@/components/areaSellOrderDetail.vue'
import plsc from '../../areaReserve/components/plsc.vue'
export default {
  components: {
    QueryForm, areaSellOrderDetail, plsc
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [{
          filed: 'projectId',
          type: 'select',
          label: '项目',
          placeholder: '请选择项目',
          clearable: true,
          options: []
        }, {
          filed: 'siteDate',
          type: 'date',
          clearable: true
        }, {
          filed: 'time',
          type: 'timePicker',
          clearable: true
        }, {
          filed: 'type',
          type: 'select',
          label: '类型',
          placeholder: '请选择类型',
          clearable: true,
          options: [
            { value: '0', label: '单次锁场' },
            { value: '1', label: '长期锁场' }
          ]
        }],
        online: true
      },
      modalDialog: store.getters.dialog,
      list: [],
      meta: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      filters: {},
      listLoading: false
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getInitData()
  },
  methods: {
    removeBtn(row) {
      const that = this
      let str = '删除'
      if (row.status === '1') {
        str = '关闭'
      }
      this.$confirm('是否确定删除选中的数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          siteLockDel({ param: { id: row.id, type: row.status === '1' ? '0' : '1' }})
            .then((res) => {
              ctx.confirmButtonLoading = false
              close()
              if (res.errorCode === '000000') {
                that.$message.success(str + '成功')
                that.getList()
              }
            })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    // 固定预定
    showGdydBtn(e) {
      siteLockDetail({
        param: {
          id: e.id
        }
      }).then((res) => {
        if (res.errorCode === '000000') {
          const obj = res.record
          obj.days = obj.days.split(',')
          obj.date = [obj.startDate, obj.endDate]
          obj.time = [obj.startTime, obj.endTime]
          this.$refs.plsc.showPlscBtn(res.record.projectId, obj)
        }
      })
    },
    getInitData() {
      getProjectList({
        param: {
          venueId: sessionStorage.getItem('venueId')
        }
      }).then((res) => {
        if (res.errorCode === '000000') {
          const arr = res.recordList
          arr.forEach(e => {
            e.label = e.projectName
            e.value = e.id
          })
          this.queryFormConfig.formItems[0].options = arr
        }
      })
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      if (filters.time && filters.time.length > 0) {
        filters.startTime = filters.time[0]
        filters.endTime = filters.time[1]
      } else {
        filters.startTime = ''
        filters.endTime = ''
      }
      this.listLoading = true
      batchSiteLockRecord({ pagination, param: { venueId, ...filters, type: '1' }})
        .then(res => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.total = res.totalCount
            if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
              this.getList(Math.ceil(res.totalCount / pagination.rows))
            }
            this.$refs.table.doLayout()
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

